import { LineLayer, Marker, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { Map } from '@antv/l7-maps';
import { RDBSource } from 'district-data';
import React, { useEffect } from 'react';

export default () => {
  const pointData = [
    {
      data: [113.177855, 23.068432],
      longitude: '113.177855',
      latitude: '23.068432',
      to_longitude: '108.484899',
      to_latitude: '22.826101',
      text: '广州',
      color: 'rgb(57,255,20)',
      value: '1',
      unit: '天',
    },
    {
      data: [108.484899, 22.826101],
      longitude: '108.484899',
      latitude: '22.826101',
      to_longitude: '106.467366',
      to_latitude: '26.64921',
      text: '南宁',
      color: 'rgb(57,255,20)',
      value: '6',
      unit: '小时',
    },
    {
      data: [106.467366, 26.64921],
      longitude: '106.467366',
      latitude: '26.64921',
      text: '贵阳',
      color: 'rgb(57,255,20)',
      value: '3',
      unit: '小时',
    },
    {
      data: [106.563516, 29.618267],
      longitude: '106.563516',
      latitude: '29.618267',
      text: '重庆',
      color: 'rgb(255,255,255)',
      value: '3',
      unit: '小时',
    },
    {
      data: [125.403053, 43.907546],
      longitude: '125.403053',
      latitude: '43.907546',
      text: '长春',
      color: 'rgb(255,255,255)',
      value: '3',
      unit: '小时',
    },
    {
      data: [113.607498, 34.794084],
      longitude: '113.607498',
      latitude: '34.794084',
      to_longitude: '125.403053',
      to_latitude: '43.907546',
      text: '郑州',
      color: 'rgb(57,255,20)',
   value: '1',
      unit: '天',
    },
    {
      data: [114.63332, 38.174659],
      longitude: '114.63332',
      latitude: ' 38.174659',
      text: '石家庄',
      color: 'rgb(255,255,255)',
      value: '3',
      unit: '小时',
    },
    {
      data: [101.740747, 36.558335],
      longitude: '101.740747',
      latitude: '36.558335',
      text: '西宁',
      color: 'rgb(255,255,255)',
      value: '3',
      unit: '小时',
    },
    {
      data: [111.677604, 40.853815],
      longitude: '111.677604',
      latitude: '40.853815',
      to_longitude: '106.563516',
      to_latitude: '29.618267',
      text: '呼和浩特',
      color: 'rgb(255,255,255)',
   value: '1',
      unit: '天',
    },
    {
      data: [120.152667, 30.195612],
      longitude: '120.152667',
      latitude: '30.195612',
      text: '杭州',
      color: 'rgb(255,255,255)',
      value: '3',
      unit: '小时',
    },
    {
      data: [115.804205, 28.766485],
      longitude: '115.804205',
      latitude: '28.766485',
      to_longitude: '120.152667',
      to_latitude: '30.195612',
      text: '南昌',
      color: 'rgb(255,255,255)',
   value: '1',
      unit: '天',
    },
    {
      data: [126.520858, 45.842367],
      longitude: '126.520858',
      latitude: '45.842367',
      text: '哈尔滨',
      color: 'rgb(255,255,255)',
      value: '3',
      unit: '小时',
    },
    {
      data: [123.459186, 41.711976],
      longitude: '123.459186',
      latitude: '41.711976',
      to_longitude: '126.520858',
      to_latitude: '45.842367',
      text: '沈阳',
      color: 'rgb(255,255,255)',
      value: '3',
      unit: '小时',
    },
    {
      data: [117.113981, 36.624459],
      longitude: '117.113981',
      latitude: '36.624459',
      to_longitude: '114.63332',
      to_latitude: '38.174659',
      text: '济南',
      color: 'rgb(255,255,255)',
      value: '3',
      unit: '小时',
    },
  ];
  

  useEffect(() => {
    const source = new RDBSource({
      version: 2023,
    });
    const scene = new Scene({
      id: 'map',
      map: new Map({
        center: [111.4453125, 32.84267363195431],
        pitch: 40,
        zoom: 4,
      }),
    });

    scene.addImage(
      '00',
      'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PPo0QYHNResAAAAAAAAAAAAADmJ7AQ/original',
    );
    scene.addImage(
      '01',
      'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*epXiTZ8B1McAAAAAAAAAAAAADmJ7AQ/original',
    );
    scene.addImage(
      '02',
      'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6WGaQKkJppIAAAAAAAAAAAAADmJ7AQ/original',
    );
    scene.on('loaded', () => {
      for (let i = 0; i < pointData.length; i++) {
        const el = document.createElement('label');
        el.className = 'labelclass';
        el.textContent = pointData[i].value + pointData[i].unit;
        el.style.background = '#e24c4c8c';
        el.style.borderRadius = '50%'; // 圆角半径设为半个宽度/高度，形成圆形
        el.style.width = '40px';
        el.style.height = '40px';
        el.style.borderColor = '#e24c4c8c';
        el.style.textAlign = 'center';
        el.style.lineHeight = '40px';
        el.style.color = '#fff';
        const marker = new Marker({
          element: el,
          offsets: [50,10]
        }).setLnglat({
          lng: Number(pointData[i].longitude) * 1,
          lat: Number(pointData[i].latitude),
        });
        scene.addMarker(marker);
      }
      source
        .getData({
          level: 'province',
        })
        .then((data) => {
          const newFeatures = data.features.filter((item) => {
            return item.properties.name;
          });
          const newData = {
            type: 'FeatureCollection',
            features: newFeatures,
          };
          const lineDown = new LineLayer()
            .source(newData)
            .shape('line')
            .color('#989494')
            .size(1)
            .style({
              raisingHeight: 200000,
            });

          scene.addLayer(lineDown);
          return '';
        });

      source
        .getData({
          level: 'country',
        })
        .then((data) => {
          const provincelayer = new PolygonLayer({})
            .source(data)
            .size(650000)
            .shape('extrude')
            .color('#1c355c')
            .style({
              heightfixed: true,
              pickLight: true,
              sourceColor: '#5886CF',
              targetColor: '#5886CF',
              //   raisingHeight: 200000,
              opacity: 0.8,
            });
          const boundaryLine = new LineLayer({ zIndex: 10 })
            .source(data)
            .shape('line')
            .color('#5dddff')
            .size(2)

            .style({
              raisingHeight: 650000,
            });

          scene.addLayer(boundaryLine);

          scene.addLayer(provincelayer);

          return '';
        });
      const flyLine3 = new LineLayer()
        .source(pointData, {
          parser: {
            type: 'json',
            x: 'longitude',
            y: 'latitude',
            x1: 'to_longitude',
            y1: 'to_latitude',
          },
        })
        .size(2)
        .shape('arc3d')
        .color(['rgb(0, 191, 255)', 'rgba(255, 255, 255, 1)'])
        .animate({
          interval: 2,
          trailLength: 2,
          duration: 1,
        })
        .style({
          thetaOffset: 2,
          opacity: 1,
        });
      const pointLayer = new PointLayer({
        depth: false,
        zIndex: 11,
        heightFixed: true,
      })
        .source(pointData, {
          parser: {
            type: 'json',
            x: 'longitude',
            y: 'latitude',
          },
        })
        .shape('cylinder')
        .size([6, 6, 90])
        .active(true)
        .color('color')
        .style({
          opacity: 1,
          opacityLinear: {
            enable: true, // true - false
            dir: 'up', // up - down
          },
          lightEnable: false,
        });
      const pointLayer2 = new PointLayer({ zIndex: 10 })
        .source(pointData, {
          parser: {
            type: 'json',
            x: 'longitude',
            y: 'latitude',
          },
        })
        .shape('circle')
        .active(true)
        .animate(true)
        .size(30)
        .color('color');

      const textLayer = new PointLayer({ zIndex: 2 })
        .source(pointData, {
          parser: {
            type: 'json',
            x: 'longitude',
            y: 'latitude',
          },
        })
        .shape('text', 'text')
        .size(14)
        .color('#0ff')
        .style({
          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
          spacing: 2, // 字符间距
          padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
          stroke: '#0ff', // 描边颜色
          strokeWidth: 0.2, // 描边宽度
          raisingHeight: 2551000,
          textAllowOverlap: true,
          heightFixed: true,
        });
      const imageLayer = new PointLayer({ zIndex: 15 })
        .source(pointData, {
          parser: {
            type: 'json',
            x: 'longitude',
            y: 'latitude',
          },
        })
        .shape('text', ['00', '01', '02'])
        .size(10)
        .style({
          raisingHeight: 110,
        });
      scene.addLayer(textLayer);
      scene.addLayer(imageLayer);
      scene.addLayer(pointLayer);
      scene.addLayer(pointLayer2);
      scene.addLayer(flyLine3);
      return '';
    });
  }, []);

  return (
    <div
      id="map"
      style={{
        height: '100vh',
        position: 'relative',
        background: '#131722',
      }}
    />
  );
};
